<template>

  <div>
    <h2>欢迎访问蜗牛养老后台管理系统</h2>
    <div class="one">
      <el-card>
        <!--搜索框11-->
        <div><span style="color: #2d3a4b">食谱类别</span></div>

        <!--添加食谱类别-->
        <el-dialog title="创建食谱类别" :visible.sync="addGoryFormVisible" @close="closeAddGoryForm"
                   :close-on-click-modal="false">
          <el-form ref="addGoryForm" :rules="addGoryFormRules" :model="addGoryForm" label-width="150px" size="mini">
            <el-form-item label="类别名称" prop="categoryname">
              <el-input v-model="addGoryForm.categoryname"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="categoryprice">
              <el-input v-model="addGoryForm.categoryprice"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="categorydetail">
              <el-input v-model="addGoryForm.categorydetail"></el-input>
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="closeAddGoryForm">取 消</el-button>
            <el-button type="primary" @click="AddGoryFormOK">确 定</el-button>
          </div>
        </el-dialog>
        <!--食谱类别主体数据-->
        <template>
          <el-table
              :data="RecipeGoryList"
              style="width: 100%"
              @row-click="handleSelect"
              highlight-current-row
          >
            <el-table-column
                label="编号"
                type="index"
                align="center">
            </el-table-column>
            <el-table-column
                prop="categoryname"
                label="名称">
            </el-table-column>
            <el-table-column label="操作" width="240">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    @click="handleEditGory(scope.row.id)">修改
                </el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDeleteGory(scope.row.id)">删除
                </el-button>
                <el-button
                    size="mini"
                    type="warning"
                    @click="handleSelect(scope.row)">选择
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!--修改食谱类别-->
        <el-dialog title="修改食谱类别" :visible.sync="modifyGoryFormVisible" @close="closeModifyGoryForm"
                   :close-on-click-modal="false">
          <el-form ref="modifyGoryForm" :rules="modifyGoryFormRules" :model="modifyGoryForm" label-width="150px"
                   size="mini">
            <el-form-item label="类别名称" prop="categoryname">
              <el-input v-model="modifyGoryForm.categoryname"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="categoryprice">
              <el-input v-model="modifyGoryForm.categoryprice"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="categorydetail">
              <el-input v-model="modifyGoryForm.categorydetail"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closeModifyGoryForm">取 消</el-button>
            <el-button type="primary" @click="modifyGoryFormOK">确 定</el-button>
          </div>
        </el-dialog>
        <div style="margin: 50% 35%">
          <el-row>
            <el-button type="primary" @click="openAddRecipeCategory">创建食谱类别</el-button>
          </el-row>
        </div>
      </el-card>
    </div>
    <div class="two">
      <el-card>
        <div><span style="color: #2d3a4b;margin: 20px 45% ">俺是食谱</span></div>
        <hr style="margin: 30px">
        <!--搜索框11-->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-input placeholder="请输入食谱名称" clearable v-model="name" @clear="search">
              <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="openAddRecipe">添加食谱</el-button>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="clearSelect">清空选择</el-button>
          </el-col>
        </el-row>
        <!--主体数据-->
        <template>
          <el-table
              :data="RecipeList"
              style="width: 100%"
              :row-class-name="tableRowClassName"


          >
            <el-table-column
                label="编号"
                type="index"
                align="center">
            </el-table-column>
            <el-table-column
                prop="recipename"
                label="食谱名称"
                align="center">
            </el-table-column>
            <el-table-column
                prop="recipebegintime"
                label="开始时间"
                align="center">
            </el-table-column>
            <el-table-column
                prop="recipeendtime"
                label="结束时间"
                align="center">
            </el-table-column>
            <el-table-column
                prop="recipecategory.categoryprice"
                label="价格"
                align="center">
              <template slot-scope="scope">
                <span style="color: green">￥{{ scope.row.recipecategory.categoryprice }}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="recipecategory.categoryname"
                label="所属类别"
                align="center">
            </el-table-column>
            <el-table-column
                label="返院状态"
                align="center"
            >
              <template slot-scope="scope">
                <span style="color: green" v-if="scope.row.recipestatus == 1">已发布</span>
                <span style="color: red" v-if="scope.row.recipestatus == 0">未发布</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="warning"
                    style="margin-top: 10px ;margin-left: 10px"
                    @click="Detail(scope.row)">详情
                </el-button>
                <el-button
                    size="mini"
                    type="success"
                    style="margin-top: 5px"
                    v-if="scope.row.recipestatus == 0"
                    @click="issue(scope.row.id)">发布
                </el-button>
                <el-button
                    size="mini"
                    type="danger"
                    style="margin-top: 3px"
                    v-if="scope.row.recipestatus == 0"
                    @click="handleDeleteRecipe(scope.row.id)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!--分页-->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[3, 6 , 12, 24]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>

        <!--查看详情-->
        <el-dialog title="食谱详情" :visible.sync="searchRecipeVisible"
                   width="80%" @close="searchRecipeFormClose" :close-on-click-modal="false">
          <el-descriptions v-model="Recipe" class="margin-top" title="食谱信息" :column="3" border>
            <template slot="extra">
              <el-button v-if="Recipe.recipestatus==0" type="warning" size="small" @click="updateRecipe(RecipeId)">
                修改食谱信息
              </el-button>
            </template>
            <el-descriptions-item>
              <template slot="label">
                食谱名称
              </template>
              <el-tag>{{ Recipe.recipename }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                所属类别
              </template>
              <el-tag>{{ Recipe.recipecategory.categoryname }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                开始时间
              </template>
              <el-tag> {{ Recipe.recipebegintime }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                结束时间
              </template>

              <el-tag> {{ Recipe.recipeendtime }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                描述
              </template>
              <el-tag>{{ Recipe.recipeDetail }}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
          <hr>

          <div style="display: flex; ">
            <el-descriptions class="margin-top" title="食物信息" :column="10" border style="flex: 2;">
              <el-descriptions-item>
                <template>
                  <el-table
                      :data="foodList"
                      style="width: 100%;margin-left: 10px"
                      :row-class-name="tableRowClassName"
                  >
                    <el-table-column
                        label="序号"
                        type="index"
                        width="50">
                    </el-table-column>
                    <el-table-column
                        prop="foodname"
                        label="食物名称"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="foodimg"
                        label="食物图片"
                        width="180">
                      <template slot-scope="b">
                        <el-image
                            style="width: 100px; height: 100px"
                            :src="'http://localhost:10001/'+b.row.foodimg"
                            fit="cover"></el-image>
                      </template>
                    </el-table-column>
                    <el-table-column
                        prop="foodremark"
                        label="实物描述"
                        width="200">
                    </el-table-column>
                    <el-table-column label="操作" width="180">
                      <template slot-scope="scope">
                        <el-button
                            size="mini"
                            v-if="Recipe.recipestatus==0"
                            @click="deleteFoodByRecipeId(scope.row.id,RecipeId)">删除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-descriptions-item>
            </el-descriptions>

            <el-descriptions v-model="Recipe" style="width: 100%;margin: 30% 80px; ">
              <template #extra>
                <el-button v-if="Recipe.recipestatus==0" type="success" size="small" @click="openAddFoodmodify">
                  添加食材
                </el-button>
              </template>
            </el-descriptions>
          </div>
        </el-dialog>
        <!--修改食谱-->
        <el-dialog title="修改食谱" :visible.sync="modifyRecipeFormVisible" @close="closeModifyRecipeForm"
                   :close-on-click-modal="false">
          <el-form ref="modifyRecipeForm" :rules="modifyRecipeFormRules" :model="modifyRecipeForm" label-width="150px"
                   size="mini">
            <el-form-item label="食谱名称" prop="recipename">
              <el-input v-model="modifyRecipeForm.recipename"></el-input>
            </el-form-item>
            <el-form-item label="食谱类别" prop="recipecategoryId">
              <el-select v-model="modifyRecipeForm.recipecategoryId">
                <el-option v-for="t in RecipeGoryList" :label="t.categoryname" :value="t.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开始时间" prop="recipebegintime">
              <el-date-picker
                  v-model="modifyRecipeForm.recipebegintime"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :editable="false"
                  type="date"
                  placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="recipeendtime">
              <el-date-picker
                  v-model="modifyRecipeForm.recipeendtime"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :editable="false"
                  type="date"
                  placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="备注" prop="recipeDetail">
              <el-input v-model="modifyRecipeForm.recipeDetail"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closeModifyRecipeForm">取 消</el-button>
            <el-button type="primary" @click="modifyRecipeFormOk">确 定</el-button>
          </div>
        </el-dialog>
        <!--食物选择-->
        <el-dialog title="食物选择" :visible.sync="addFoodFormVisiblemodify" @close="closeAddFoodFormmodify"
                   :close-on-click-modal="false">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-input placeholder="请输入食物名称" clearable v-model="foodName" @clear="searchfood">
                <el-button slot="append" icon="el-icon-search" @click="searchfood"></el-button>
              </el-input>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" @click="clearSelectFood">清空搜索</el-button>
            </el-col>
          </el-row>
          <template>
            <el-table
                :data="foodAllList"
                style="width: 100%;margin-left: 10px"
                :row-class-name="tableRowClassName"
            >
              <el-table-column
                  label="序号"
                  type="index"
                  width="50">
              </el-table-column>
              <el-table-column
                  prop="foodname"
                  label="食物名称"
                  width="120">
              </el-table-column>
              <el-table-column
                  prop="foodimg"
                  label="食物图片"
                  width="180">
                <template slot-scope="b">
                  <el-image
                      style="width: 100px; height: 100px"
                      :src="'http://localhost:10001/'+b.row.foodimg"
                      fit="cover"></el-image>
                </template>
              </el-table-column>
              <el-table-column
                  prop="foodremark"
                  label="实物描述"
                  width="200">
              </el-table-column>
              <el-table-column
                  prop="foodprice"
                  label="价格"
                  width="90">
                <template slot-scope="scope">
                  <span style="color: green">￥{{ scope.row.foodprice }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <el-button
                      size="mini"
                      @click="addFoodByRecipeId(scope.row.id,RecipeId)">选择
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <el-pagination
              @size-change="handleSizeChangeFood"
              @current-change="handleCurrentChangeFood"
              :current-page="foodpageNum"
              :page-sizes="[3, 6 , 12, 24]"
              :page-size="foodpageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="foodtotal"
          ></el-pagination>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closeAddFoodFormmodify">退 出</el-button>
          </div>
        </el-dialog>
        <!--添加框食物选择-->
        <el-dialog title="添加食材" :visible.sync="addFoodFormVisible" @close="closeAddFoodForm"
                   :close-on-click-modal="false">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-input placeholder="请输入食物名称" clearable v-model="addfoodName" @clear="searchfoodAdd">
                <el-button slot="append" icon="el-icon-search" @click="searchAdd"></el-button>
              </el-input>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" @click="clearSelectFoodAdd">清空搜索</el-button>
            </el-col>
          </el-row>
          <template>
            <el-table
                :data="foodAllListAdd"
                style="width: 100%;margin-left: 10px"
                :row-class-name="tableRowClassName"
            >
              <el-table-column
                  label="序号"
                  type="index"
                  width="50">
              </el-table-column>
              <el-table-column
                  prop="foodname"
                  label="食物名称"
                  width="120">
              </el-table-column>
              <el-table-column
                  prop="foodimg"
                  label="食物图片"
                  width="180">
                <template slot-scope="b">
                  <el-image
                      style="width: 100px; height: 100px"
                      :src="'http://localhost:10001/'+b.row.foodimg"
                      fit="cover"></el-image>
                </template>
              </el-table-column>
              <el-table-column
                  prop="foodremark"
                  label="实物描述"
                  width="200">
              </el-table-column>
              <el-table-column
                  prop="foodprice"
                  label="价格"
                  width="90">
                <template slot-scope="scope">
                  <span style="color: green">￥{{ scope.row.foodprice }}</span>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                  <el-button
                      size="mini"
                      @click="addFoodByRecipeIdInsert(scope.row)">选择
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <el-pagination
              @size-change="handleSizeChangeFoodAdd"
              @current-change="handleCurrentChangeFoodAdd"
              :current-page="addfoodpageNum"
              :page-sizes="[3, 6 , 12, 24]"
              :page-size="addfoodpageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="addfoodtotal"
          ></el-pagination>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closeAddFoodForm">退 出</el-button>
          </div>
        </el-dialog>
        <!--添加食谱-->
        <el-dialog title="添加食谱信息" :visible.sync="addRecipeFormVisible" @close="closeAddRecipeForm"
                   :close-on-click-modal="false" width="65%">
          <el-form ref="addRecipeForm" :rules="addRecipeFormRules" :model="addRecipeForm" label-width="150px"
                   size="mini">
            <el-form-item label="食谱名称" prop="recipename">
              <el-input v-model="addRecipeForm.recipename"></el-input>
            </el-form-item>
            <el-form-item label="食谱类别" prop="recipecategoryId">
              <el-select v-model="addRecipeForm.recipecategoryId">
                <el-option v-for="t in RecipeGoryList" :label="t.categoryname" :value="t.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开始时间" prop="recipebegintime">
              <el-date-picker
                  v-model="addRecipeForm.recipebegintime"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :editable="false"
                  type="date"
                  placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间" prop="recipeendtime">
              <el-date-picker
                  v-model="addRecipeForm.recipeendtime"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :editable="false"
                  type="date"
                  placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="备注" prop="recipeDetail">
              <el-input v-model="addRecipeForm.recipeDetail"></el-input>
            </el-form-item>
            <el-form-item label="食谱食材">
              <el-button type="success" size="small" @click="openAddFood">
                添加食材
              </el-button>
            </el-form-item>
          </el-form>
          <el-descriptions class="margin-top" title="食物信息" border>
            <el-descriptions-item>
              <template>
                <el-table
                    :data="addfoodList"
                    style="width: 100%;margin-left: 10px"
                    :row-class-name="tableRowClassName"
                >
                  <el-table-column
                      label="序号"
                      type="index"
                      width="60">
                  </el-table-column>
                  <el-table-column
                      prop="foodname"
                      label="食物名称"
                      width="180">
                  </el-table-column>
                  <el-table-column
                      prop="foodimg"
                      label="食物图片"
                      width="180">
                    <template slot-scope="b">
                      <el-image
                          style="width: 100px; height: 100px"
                          :src="'http://localhost:10001/'+b.row.foodimg"
                          fit="cover"></el-image>
                    </template>
                  </el-table-column>
                  <el-table-column
                      prop="foodremark"
                      label="实物描述"
                      width="200">
                  </el-table-column>
                  <el-table-column
                      prop="foodprice"
                      label="价格"
                      width="200">
                    <template slot-scope="scope">
                      <span style="color: green">￥{{ scope.row.foodprice }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                      <el-button
                          size="mini"
                          @click="deleteFoodByRecipeIdAdd(scope.row.id)">删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-descriptions-item>
          </el-descriptions>


          <div slot="footer" class="dialog-footer">
            <el-button @click="closeAddRecipeForm">取 消</el-button>
            <el-button type="primary" @click="addRecipeFormOk">确 定</el-button>
          </div>
        </el-dialog>
      </el-card>
    </div>


  </div>
</template>

<script>
import {toRefs} from "vue";

export default {
  data() {
    return {
      foodAllListAdd: [],
      addRecipeForm: {
        foodList: [],
      },
      addfoodList: [],
      addFoodFormVisible: false,
      addRecipeFormRules: {
        recipename: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        recipecategoryId: [
          {required: true, message: '不能为空', trigger: 'blur'},
        ],
        recipebegintime: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        recipeendtime: [
          {required: true, message: '不能为空', trigger: 'blur'},
        ],
      },
      modifyRecipeFormRules: {
        recipename: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        recipecategoryId: [
          {required: true, message: '不能为空', trigger: 'blur'},
        ],
        recipebegintime: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        recipeendtime: [
          {required: true, message: '不能为空', trigger: 'blur'},
        ],
      },
      modifyRecipeForm: {},
      foodList: [],
      foodIdList: [],
      RecipeId: '',
      searchRecipeVisible: false,
      Recipe: {
        recipecategory: {},
      },
      goryId: '-1',
      foodName: '',
      addfoodName: '',
      foodAllList: [],
      innerVisible: false,
      addGoryForm: {},
      modifyGoryForm: {},
      RecipeGoryList: [],
      RecipeList: [],
      modifyRecipeFormVisible: false,
      addRecipeFormVisible: false,
      modifyGoryFormVisible: false,
      goBackOutFormVisible: false,
      addGoryFormVisible: false,
      addFoodFormVisiblemodify:false,
      name: '',
      pageNum: 1,
      foodpageNum: 1,
      addfoodpageNum: 1,
      pageSize: 3,
      foodpageSize: 3,
      addfoodpageSize: 3,
      total: 0,
      foodtotal: 0,
      addfoodtotal: 0,
      addGoryFormRules: {
        categoryname: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        categoryprice: [
          {required: true, message: '不能为空', trigger: 'blur'},
          {pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '必须为大于0的数字', trigger: 'blur'}
        ],
      },
      modifyGoryFormRules: {
        categoryname: [
          {required: true, message: '不能为空', trigger: 'blur'}
        ],
        categoryprice: [
          {required: true, message: '不能为空', trigger: 'blur'},
          {pattern: /^(?!(0[0-9]{0,}$))[0-9]{1,}[.]{0,}[0-9]{0,}$/, message: '必须为大于0的数字', trigger: 'blur'}
        ],
      },

    };
  },
  methods: {
    //确认添加食谱
    addRecipeFormOk() {
      this.addRecipeForm.foodList = this.addfoodList;
      if (this.addfoodList.length < 1) {
        this.$message({
          message: "请至少选择一种食材",
          type: 'error',
          duration: 1000
        });
        return
      }
      this.$refs.addRecipeForm.validate((vaild) => {
        if (!vaild) {
          this.$message({
            message: "请先完善数据",
            type: 'error',
            duration: 1000
          });
        } else {
          this.$confirm("你确定要创建吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            let url = '/recipe/addRecipe'
            this.$axios.post(url, this.addRecipeForm).then((res) => {
              console.log(this.addRecipeForm)
              if (res.data.code == 200) {
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                  duration: 1000
                });
                this.addRecipeFormVisible = false;
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'error',
                  duration: 1000
                });
              }
            })
          }).catch(() => {
            this.$message({
              type: "info",
              message: "取消成功"
            })
          })
        }
      })
    },
    //添加到食谱添加的数组中
    addFoodByRecipeIdInsert(food) {
      for (let f of this.addfoodList) {
        if (f.id == food.id) {
          this.$message({
            message: "请勿重复添加",
            type: 'error',
            duration: 1000
          });
          return
        }
      }
      this.addfoodList.push(food);
      this.$message({
        message: "添加成功",
        type: 'success',
        duration: 1000
      });
    },
    //关闭添加食谱
    closeAddRecipeForm() {
      this.addRecipeFormVisible = false;
    },
    //打开添加食谱
    openAddRecipe() {
      this.addfoodList = [];
      this.addRecipeForm = {};
      this.addRecipeFormVisible = true;
    },
    //选择食物
    addFoodByRecipeId(foodId, recipeId) {
      for (let food of this.foodList) {
        if (food.id == foodId) {
          this.$message({
            message: "该食材已在食谱中了,请勿重复添加",
            type: 'error',
            duration: 1000
          });
          return
        }
      }
      let url = '/recipe/addFoodByRecipeId/' + foodId + '/' + recipeId
      this.$axios.post(url).then((res) => {
        if (res.data.code == 200) {
          this.$message({
            message: res.data.msg,
            type: 'success',
            duration: 1000
          });
          this.initRecipeList();
          this.foodList = res.data.data.foodList;
          this.$set(this.Recipe, res.data.data.foodList, res.data.data.foodList);
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    //初始化食物数据
    initFoodAllList() {
      let url = '/food/selectAll'
      this.$axios.get(url, {
        params: {
          name: this.foodName,
          now: this.foodpageNum,
          size: this.foodpageSize
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.foodAllList = res.data.data.list;
          this.foodpageNum = res.data.data.pageNum;
          this.foodpageSize = res.data.data.pageSize;
          this.foodtotal = res.data.data.total;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    //初始化添加框食物数据
    initFoodAllListAdd() {
      let url = '/food/selectAll'
      this.$axios.get(url, {
        params: {
          name: this.addfoodName,
          now: this.addfoodpageNum,
          size: this.addfoodpageSize
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.foodAllListAdd = res.data.data.list;
          this.addfoodpageNum = res.data.data.pageNum;
          this.addfoodpageSize = res.data.data.pageSize;
          this.addfoodtotal = res.data.data.total;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    //打开添加食物对话框
    openAddFood() {
      this.addFoodFormVisible = true;
    },
    //关闭添加食物
    closeAddFoodForm() {
      this.addFoodFormVisible = false;
    },
    //打开添加食物对话框
    openAddFoodmodify() {
      this.addFoodFormVisiblemodify = true;
    },
    //关闭添加食物
    closeAddFoodFormmodify() {
      this.addFoodFormVisiblemodify = false;
    },
    tableRowClassName({rowIndex}) {
      if (rowIndex === 0) {
        return 'white-row'; // 第一行为白色
      } else if (rowIndex % 4 === 1) {
        return 'warning-row'; // 第二行和每隔三行后的行为绿色
      } else if (rowIndex % 2 === 0) {
        return ''; // 第二行和每隔三行后的行为绿色
      } else if (rowIndex % 3 === 2) {
        return 'white-row'; // 第三行和每隔三行后的行为白色
      } else {
        return 'success-row'; // 每隔三行后的行为黄色
      }
    },
    //删除食谱
    handleDeleteGory(id) {
      this.$confirm("你确定要删除此食谱类别吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let url = '/recipeCategory/deleteRecipeCategory/' + id;
        this.$axios.delete(url).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.msg,
              type: 'success',
              duration: 1000
            });
            this.initRecipeGoryList();
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error',
              duration: 1000
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "取消成功"
        })
      })
    },
    openAddRecipeCategory(id) {
      this.addGoryFormVisible = true;
      this.addGoryForm = {};
    },
    closeAddGoryForm() {
      this.addGoryFormVisible = false;
    },
    //打开修改食谱类别
    handleEditGory(id) {
      this.modifyGoryFormVisible = true;
      let url = "/recipeCategory/selectRecipeGoryById/" + id;
      this.$axios.get(url).then((res) => {
        if (res.data.code == 200) {
          this.modifyGoryForm = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    //确认添加
    AddGoryFormOK() {
      this.$refs.addGoryForm.validate((vaild) => {
        if (!vaild) {
          return
        } else {
          this.$confirm("你确定要创建吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            let url = '/recipeCategory/addRecipeGory'
            this.$axios.post(url, this.addGoryForm).then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                  duration: 1000
                });
                this.initRecipeGoryList();
                this.addGoryFormVisible = false;
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'error',
                  duration: 1000
                });
              }
            })
          }).catch(() => {
            this.$message({
              type: "info",
              message: "取消成功"
            })
          })
        }
      })
    },
    //确认修改
    modifyGoryFormOK() {
      this.$refs.modifyGoryForm.validate((vaild) => {
        if (!vaild) {
          return
        } else {
          let url = '/recipeCategory/modifyRecipe'
          this.$axios.put(url, this.modifyGoryForm).then((res) => {
            if (res.data.code == 200) {
              this.$message({
                message: res.data.msg,
                type: 'success',
                duration: 1000
              });
              this.initRecipeGoryList();
              this.initRecipeList();
              this.modifyGoryFormVisible = false;
            } else {
              this.$message({
                message: res.data.msg,
                type: 'error',
                duration: 1000
              });
            }
          })
        }
      })
    },
    //关闭修改对话框
    closeModifyGoryForm() {
      this.modifyGoryFormVisible = false;
    },
    //初始化查询食谱数据
    initRecipeGoryList() {
      let url = "/recipeCategory/list"
      this.$axios.get(url).then((res) => {
        if (res.data.code == 200) {
          this.RecipeGoryList = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    /*===============================================================================================================*/
    /*===============================================================================================================*/
    /*===============================================================================================================*/
    /*===============================================================================================================*/


    closeModifyRecipeForm() {
      this.modifyRecipeFormVisible = false;
    },
    //查询一个食谱
    updateRecipe(RecipeId) {
      let url = '/recipe/selectRecipeById/' + RecipeId;
      this.modifyRecipeFormVisible = true;
      this.$axios.get(url).then((res) => {
        if (res.data.code == 200) {
          this.modifyRecipeForm = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    deleteFoodByRecipeId(foodId, recipeId) {
      if (this.foodList.length == 1) {
        this.$message({
          message: "食谱中请至少有一样食材",
          type: 'error',
          duration: 1000
        });
        return
      }
      this.$confirm("你确定要在食谱中删除此食材吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let url = '/recipe/deleteFoodByRecipeId/' + foodId + '/' + recipeId;
        this.$axios.delete(url).then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.msg,
              type: 'success',
              duration: 1000
            });
            this.initRecipeList();
            this.foodList = res.data.data.foodList;
            this.$set(this.Recipe, res.data.data.foodList, res.data.data.foodList);
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error',
              duration: 1000
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "取消成功"
        })
      })
    },
    deleteFoodByRecipeIdAdd(foodId) {
      if (this.addfoodList.length == 1) {
        this.$message({
          message: "食谱中请至少有一样食材",
          type: 'error',
          duration: 1000
        });
        return
      }
      this.$confirm("你确定要在食谱中删除此食材吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        for (let i = this.addfoodList.length - 1; i >= 0; i--) {
          if (this.addfoodList[i].id == foodId) {
            this.addfoodList.splice(i, 1);
            this.$message({
              message: "删除成功",
              type: 'success',
              duration: 1000
            });
          } else {
            this.$message({
              message: "删除失败",
              type: 'error',
              duration: 1000
            });
          }
        }

      }).catch(() => {
        this.$message({
          type: "info",
          message: "取消成功"
        })
      })
    },

    searchRecipeFormClose() {
      this.searchRecipeVisible = false;
    },
    clearSelect() {
      this.goryId = '-1';
      this.name = '';
      this.initRecipeList();
      this.initRecipeGoryList();
    },
    //详情的食物选择使用
    clearSelectFood() {
      this.foodName = '';
      this.initFoodAllList();
    },
    //添加的食物选择使用
    clearSelectFoodAdd() {
      this.addfoodName = '';
      this.initFoodAllListAdd();
    },
    handleSelect(row) {
      this.goryId = row.id;
      this.initRecipeList();
    },

    //确认修改
    modifyRecipeFormOk() {
      let url = '/recipe/updateRecipe'
      this.$refs.modifyRecipeForm.validate((valid) => {
        if (!valid) {
          this.$message({
            message: "请先完善数据",
            type: 'error',
            duration: 1000
          });
          return
        } else {
          this.$confirm("确认修改吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
            this.$axios.post(url, this.modifyRecipeForm).then((res) => {
              if (res.data.code == 200) {
                this.$message({
                  message: res.data.msg,
                  type: 'success',
                  duration: 1000
                });
                this.modifyRecipeFormVisible = false;
                this.initRecipeList();
                this.initRecipeGoryList();
                this.$set(this.Recipe, "recipename", res.data.data.recipename);
                this.$set(this.Recipe, "recipecategoryId", res.data.data.recipecategoryId);
                this.$set(this.Recipe, "recipebegintime", res.data.data.recipebegintime);
                this.$set(this.Recipe, "recipeendtime", res.data.data.recipeendtime);
                this.$set(this.Recipe, "recipeDetail", res.data.data.recipeDetail);
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'error',
                  duration: 1000
                });
              }
            })
          }).catch(() => {
            this.$message({
              type: "info",
              message: "取消成功"
            })
          })
        }
      })

    },
    //删除食谱
    handleDeleteRecipe(id) {
      this.$confirm("你确定要删除此食谱吗,删除后不可恢复？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(()=>{
        let url ='/recipe/deleteRecipe/'+id;
        this.$axios.delete(url).then((res)=>{
          if (res.data.code==200){
            this.$message({
              message: res.data.msg,
              type: 'success',
              duration: 1000
            });
            this.initRecipeList();
          }else{
            this.$message({
              message: res.data.msg,
              type: 'error',
              duration: 1000
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "取消成功"
        })
      })
    },
    //食谱详情
    Detail(recipe) {
      this.searchRecipeVisible = true;
      this.RecipeId = recipe.id;
      this.Recipe = recipe;
      this.foodList = recipe.foodList;
    },
    //发布食谱
    issue(id) {
      this.$confirm("你确定要发布此食谱吗,发布后不可取消？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(()=>{
        let url ='/recipe/modifyStatusById/'+id;
        this.$axios.put(url).then((res)=>{
          if (res.data.code==200){
            this.$message({
              message: res.data.msg,
              type: 'success',
              duration: 1000
            });
            this.initRecipeList();
          }else{
            this.$message({
              message: res.data.msg,
              type: 'error',
              duration: 1000
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "取消成功"
        })
      })
    },

    search() {
      this.pageNum = 1;
      this.initRecipeList();
    },
    searchfood() {
      this.foodpageNum = 1;
      this.initFoodAllList();
    },

    searchfoodAdd() {
      this.addfoodName = '';
      this.addfoodpageNum = 1;
      this.initFoodAllListAdd();
    },
    searchAdd() {
      this.foodpageNum = 1;
      this.initFoodAllListAdd();
    },
    //改变条数查询
    handleSizeChange(size) {
      this.pageSize = size;
      this.pageNum = 1;
      this.initRecipeList();
    },
    //改变详情食物条数
    handleSizeChangeFood(size) {
      this.foodpageSize = size;
      this.foodpageNum = 1;
      this.initFoodAllList();
    },
    //改变添加食物条数
    handleSizeChangeFoodAdd(size) {
      this.addfoodpageSize = size;
      this.addfoodpageNum = 1;
      this.initFoodAllListAdd();
    },
    //改变页数查询
    handleCurrentChange(now) {
      this.pageNum = now;
      this.initRecipeList();
    },
    //改变详情食物页数
    handleCurrentChangeFood(now) {
      this.foodpageNum = now;
      this.initFoodAllList();
    },
    //改变添加食物页数
    handleCurrentChangeFoodAdd(now) {
      this.addfoodpageNum = now;
      this.initFoodAllListAdd();
    },
    //初始化查询外出申请数据
    initRecipeList() {
      let url = "/recipe/list"
      this.$axios.get(url, {
        params: {
          goryId: this.goryId,
          name: this.name,
          now: this.pageNum,
          size: this.pageSize
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.RecipeList = res.data.data.list;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;
        } else {
          this.$message({
            message: res.data.msg,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
  },
  created() {
    this.initRecipeGoryList();
    this.initRecipeList();
    this.initFoodAllList();
    this.initFoodAllListAdd();
  }
}
</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.one {
  width: 32%;
  height: 800px;
  background-color: #ffffff;
  float: left;
}

.two {
  width: 66%;
  height: 900px;
  background-color: #ffffff;
  float: right;
}
</style>